<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less"/>
    <link rel="stylesheet/less" href="./less/earnings.less"/>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">我的收益</div>
                    <a href="./mine.html">
                        <img src="./img/arrow_back.png">
                    </a>
                </header>
            </div>
            <div class="header">
                <ul>
                    <li v-for="(item,index) in earnings" :class="isActive==index?'select':'default'" @click="tabb(index)">{{item}}</li>
                </ul>
            </div>
            <div class="content">
                <ul v-for="(item,index) in subsidies">
                    <li>{{item.name}}</li>
                    <li>￥{{item.price}}元</li>
                </ul>
            </div>
            <div id="loadingToast" v-if="loadingStatus">
                <div class="weui-mask"></div>
                <div class="weui-toast">
                    <span class="weui-primary-loading weui-icon_toast">
                      <span class="weui-primary-loading__dot"></span>
                    </span>
                    <p class="weui-toast__content">加载中</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="module">
    import { getMyIncome } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
     let app = new Vue({
        el: '#app',
        data: {
            earnings: ['今日收益','累计收益'],
            isActive: 0,
            subsidies:[
                {
                    name: '开团补贴',
                    price:''
                },
                {
                    name: '分红补贴',
                    price:''
                },
                {
                    name: '代言补贴',
                    price:''
                },
                {
                    name: '流量补贴',
                    price:''
                },
                {
                    name: '广告补贴',
                    price:''
                }
            ],
            loadingStatus: false,
        },
        mounted(){
            let that = this;
            that.earning('1');
            that.public.shareLink();
        },
        methods:{
            tabb(index){
                this.isActive = index;
                if(index == 0){
                    let that = this;
                        that.earning('1');
                }else if(index == 1){
                    let that = this;
                        that.earning('2');
                }
            },

            earning(type){
                let that = this;
                let userData = JSON.parse(localStorage.getItem("userData"));

                getMyIncome({
                    userId: userData.userId,
                    type: type
                }).then(res=>{
                    that.loadingStatus = true;
                    if(res.code == 0){
                        that.subsidies[0].price = res.data.openTeamIncome;
                        that.subsidies[1].price = res.data.dividendsIncome;
                        that.subsidies[2].price = res.data.spokespersonIncome;
                        that.subsidies[3].price = res.data.flowIncome;
                        that.subsidies[4].price = res.data.advIncome;
                        setInterval(()=>{
                            that.loadingStatus = false;
                        },2000)
                    }
                }).catch(function (error) {
                    console.log(error);
                })
            },
        },
    })
</script>